<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="1.css" />
</head>

<body>
    <!-- 1. 编写一个 CSS 选择器，选择列表中的第一个列表项，并将其背景颜色设置为浅灰色。 -->
    <table class="one">
        <tr>

            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <hr>
    <!-- 2. 创建一个规则，使得表格中的每一行（除了第一行）的背景颜色交替显示，一行浅灰色，下一行白色。 -->
    <table class="two">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <hr>
    <!-- 3. 设计一个样式，使得每个 div 中的最后一个段落的文本颜色为红色。 -->
    <div class="three">
        <p>你好1</p>
        <p>你好2</p>
    </div>
    <div class="three">
        <p>你好1</p>
        <p>你好2</p>
    </div>
    <div class="three">
        <p>你好1</p>
        <p>你好2</p>
    </div>
    <hr>
    <!-- 4. 编写一个选择器，选择表格中的最后一列，并将其背景颜色设置为淡蓝色。 -->
    <table class="four">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <hr>
    <!-- 5. 使用结构伪类选择器选中第一个输入框，并将其边框颜色设置为绿色。 -->
    <div class="five">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
    <hr>
    <!-- 6. 创建一个规则，选中每个父元素下的第二个子元素，并将其字体加粗。 -->
    <div class="six">
        <div>
            <span>你好1</span>
            <span>你好2</span>
            <span>你好3</span>
        </div>
        <p>
            <span>你好1</span>
            <span>你好2</span>
            <span>你好3</span>
        </p>
        <div>
            <p>你好1</p>
            <p>你好2</p>
            <p>你好3</p>
        </div>
    </div>
    <hr>
    <!-- 7. 创建一个规则，选中列表中的偶数行，并将它们的文本颜色设置为蓝色。 -->
    <table class="seven">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>
    <hr>
    <!-- 8. 编写一个选择器，选择每个表格中第二行第三列的单元格，并将其背景颜色设置为黄色。 -->
    <table class="eight">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    <hr>

    <!-- 9. 设计一个样式，使得每个含有 `.nine` 类的段落的下一个兄弟元素（紧邻的下一个同级元素）的背景颜色为粉红色。 -->
    <div>
        <p class="nine">你好1</p>
        <p>你好2</p>
        <p>你好3</p>
        <p>你好4</p>
    </div>
    <hr>
    <!-- 10. 创建一个规则，选中列表中倒数第二个列表项，并将其文本颜色设置为橙色。 -->
    <ul class="ten">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <hr>
    <!-- 11. 使用结构伪类选择器选中第一个段落中的第一个字，并将其文本颜色设置为红色。 -->
    <div class="eleven">
        <p>你好啊</p>
    </div>
    <hr>
    <!-- 12. 编写一个选择器，选择每个表格中最后一行的所有单元格，并将它们的边框设置为实线。 -->
    <table class="twelve">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

</html>